<template>
	<view class="page">
		<u-navbar title="设置" autoBack fixed placeholder titleStyle="color: #232832" leftIconColor="#232832"
			bgColor="#FFFFFF"></u-navbar>
		<c-content :top="statusBarHeight + 44" bgColor="#F4F4F7">
			<view class="cell-group" v-for="(group, index) in menus" :key="index">
				<view class="cell-group__title">{{ group.title }}</view>
				<view class="cell" v-for="(menu, i) in group.children" :key="i" @click="goMenu(menu)">
					<view class="cell-item__icon">
						<text :class="menu.icon"></text>
					</view>
					<view class="cell-item__title">{{ menu.title }}</view>
					<view class="cell-item__value">
						<u-icon v-if="menu.valueType == 'icon'" name="arrow-right" color="#232832"></u-icon>
						<text v-else-if="menu.valueType == 'value'">{{ menu.value }}</text>
					</view>
				</view>
			</view>
			<view class="placeholder-bar-bottom"></view>
		</c-content>

		<c-modal :show="modal" showCancel title="系统提示" content="此操作将永久移除当前账号数据" @confirm="confirm"
			@cancel="modal = false;"></c-modal>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				menus: [{
						title: '关于',
						children: [{
								icon: 'icon-aboutus',
								title: '关于我们',
								valueType: 'icon',
								value: '',
								url: '/pages/common/aboutus'
							},
							{
								icon: 'icon-version',
								title: '检查更新',
								valueType: 'value',
								value: uni.getAppBaseInfo().appVersion,
								url: '',
								type: 'version'
							},
							{
								icon: 'icon-version',
								title: '清理缓存',
								valueType: 'value',
								value: uni.getStorageInfoSync().currentSize > 512 ?
									`${(uni.getStorageInfoSync().currentSize / 1024).toFixed(2)}MB` :
									`${uni.getStorageInfoSync().currentSize}kb`,
								url: '',
								type: 'clear'
							},
						]
					},
					{
						title: '其他',
						children: [{
								icon: 'icon-protocol',
								title: '用户协议',
								valueType: 'icon',
								value: '',
								url: '/pages/common/protocol'
							},
							{
								icon: 'icon-policy',
								title: '隐私政策',
								valueType: 'icon',
								value: '',
								url: '/pages/common/policy'
							},
							{
								icon: 'icon-policy',
								title: '发帖规范',
								valueType: 'icon',
								value: '',
								url: '/pages/common/rule'
							},
							{
								icon: 'icon-feedback',
								title: '问题反馈',
								valueType: 'icon',
								value: '',
								url: '/pages/common/feedback'
							},
							{
								icon: 'icon-zhuxiao',
								title: '账号注销',
								valueType: 'icon',
								value: '-1',
								url: ''
							}
						]
					}
				],
				modal: false
			}
		},
		computed: {
			storeSize() {
				return uni.getStorageInfoSync().currentSize + 'kb'
			}
		},
		methods: {
			goMenu(menu) {
				if (menu.url) {
					uni.navigateTo({
						url: menu.url
					})
				}
				if (menu.value == -1) {
					this.modal = true
				}
				if (menu.type == 'version') {
					uni.loading.show('正在获取最新版本')
					// #ifdef APP
					const { appVersionCode, osName } = uni.getSystemInfoSync()
					const params = {
						versionCode: appVersionCode,
						platform: osName
					}
					this.$request.post('/upgrade/checkVersion', params).then(res => {
						uni.loading.hide()
						if(res.code === 200) {
							if(res.data.hasUpdate) {
								uni.navigateTo({
									url: `/pages/common/upgrade?item=${JSON.stringify(res.data)}`,
								})
							}else {
								uni.toast.show('当前已是最新版本')
							}
						}
					})
					// #endif
					// #ifdef MP
					const updateManager = uni.getUpdateManager();
					updateManager.onCheckForUpdate(res => {
						uni.loading.hide()
						if(res.hasUpdate) {
							uni.loading.show('正在更新')
							updateManager.onUpdateReady(() => {
								uni.loading.hide()
								updateManager.applyUpdate()
							})
						}else {
							uni.toast.show('当前已是最新版本')
						}
					})
					// #endif
				}
				if (menu.type == 'clear') {
					uni.loading.show('正在清理缓存')
					setTimeout(() => {
						uni.loading.hide()
						uni.toast.show('清理成功')
						this.$set(this.menus[2].children[2], 'value', '0kb')
					}, Math.random() * 2001 + 1000)
				}
			},
			confirm() {
				uni.navigateTo({
					url: '/pages/common/verify?type=2'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cell-group {

		&__title {
			padding: 10px 13px;
			color: #8C9198;
			font-size: 14px;
			line-height: 20px;
			font-weight: 400;
		}

		.cell {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 10px 22px;
			border-bottom: 1px solid #F4F4F7;

			&-item__icon {
				margin-right: 13px;
				color: #232832;
			}

			&-item__title {
				flex: 1;
				color: #232832;
				font-size: 15px;
				line-height: 23px;
				font-weight: 400;
			}

			&-item__value {
				color: #666666;
				font-size: 13px;
				line-height: 18px;
				font-weight: 400;
			}
		}
	}
</style>